<template>
    <div id="login">
        <el-form :rules="rules" ref="form" status-icon :model="form" label-width="80px" class="form">
            <h3 class="title" style="font-size: 25px">{{formTitle}}</h3>

            <el-form-item prop="username" >
                <el-input v-model="form.username"  :placeholder="placeholder.username" class="marginTB" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="password" >
                <el-input v-model="form.password" show-password :placeholder="placeholder.password" class="marginTB" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item v-if="register"   prop="checkPassword">
                <el-input v-model="form.checkPassword" show-password :placeholder="placeholder.checkPassword" class="marginTB" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>


            <el-form-item prop="captchaInputCode">

                <el-row type="flex"  justify="space-between">
                    <el-col :span="10">
                        <el-input v-model="form.captchaInputCode" placeholder="请输入验证码" class="marginTB" prefix-icon="el-icon-burger"></el-input>
                    </el-col>
                    <el-col :span="13" style="text-align: center">
                        <img :src="captchaUrl" alt="请输入验证码" style="width: 100%;height: 100%;cursor: pointer" @click="updateCaptcha">
                    </el-col>
                </el-row>

<!--                <el-checkbox v-if="!register" v-model="form.captchaInputCode" class="marginTB rememberMe" >记住我</el-checkbox>-->
            </el-form-item>





            <el-button type="primary" @click="onSubmit('form')" class="marginTB marginLR" style="width: 100%;margin-top: 10px">{{formButtonText}}</el-button>

            <div style="width: 100%;text-align: left" class="marginTB paddingLR">
                <span @click="toRegister">
                    <el-link  type="info"  href="javascript:;">{{formRegisterText}}</el-link>
                </span>
            </div>

        </el-form>
    </div>

</template>

<script>
    export default {
        name: "loginVue",
        data() {
            let checkSecondPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                captchaUrl:"",      //验证码图片的url
                form: {},           //登录表单
                register:false,     //是否为注册界面
                formTitle:"登录影资管理系统",               //表单名字
                formRegisterText:"去登录?",            //表单下方的登录注册文字
                formButtonText:"登录",                 //表单按钮文字
                placeholder:{
                    username:"请输入用户名",
                    password:"请输入用户密码",
                    checkPassword:  "",
                },                                  //提示信息
                //校验规则
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入用户密码', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    checkPassword: [
                        { validator: checkSecondPassword, trigger: 'blur' }
                    ],
                    captchaInputCode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.initView();
            this.updateCaptcha();
        },
        methods: {
            //更新验证码
            updateCaptcha(){
                this.request.get("/index/user/generateCaptcha").then(res=>{
                    if (res.code=="200"){
                        this.captchaUrl=res.data;

                    }
                })
            },
            //初始化界面
            initView(){
                this.form={};
                if (this.register==true){         //注册界面
                    this.formTitle="欢迎注册";
                    this.formRegisterText="已有账号,去登录?";
                    this.formButtonText="注册";
                    this.placeholder.username="请输入注册用户名";
                    this.placeholder.password="请输入注册密码";
                    this.placeholder.checkPassword="请重新输入注册密码";
                }else {                 //登录界面
                    this.formTitle="登录影资管理系统";
                    this.formRegisterText="去注册?";
                    this.placeholder.checkPassword=""
                    this.formButtonText="登录";
                    this.placeholder.username="请输入用户名";
                    this.placeholder.password="请输入用户密码";
                    this.placeholder.checkPassword="";
                }

            },
            //刷新界面，改变界面为注册界面
            toRegister(){
                this.register=(this.register)?false:true;
            },
            //提交登录请求
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.register){         //注册
                            this.request.post("/index/user/register",this.form).then(res=>{
                                if (res.code=='200'){
                                    this.$message({
                                        message: '注册成功，请重新登录',
                                        type: 'success',
                                        duration: 1000,
                                    });
                                    this.register=false;
                                }else {
                                    this.$message.error(res.data);
                                }
                            })
                        }else{                      //登录
                            this.request.post("/index/user/login",this.form).then(res=>{
                                if (res.code=='200'){
                                    localStorage.setItem("user",JSON.stringify(res.data));
                                    this.$router.push({path: '/frontFramework/'});
                                    this.$message({
                                        message: '登录成功',
                                        type: 'success',
                                        duration: 1000,
                                    });
                                }else {
                                    this.$message.error(res.data);
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });

            }
        },
        watch:{
            //监听register值变化
            register(){
                this.initView();
            }
        }
    }

</script>

<style scoped>

    /deep/.el-form-item__content{
        margin-left: 0px!important;
    }

    /deep/.el-form-item {
        margin-bottom: 15px!important;
    }

    #login{
        background-image: url("../../assets/static/img/login_background.jpg");
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .form{
        width: 17%;
        /*height: 30%;*/
        text-align: center;
        background: white;
        color: black;
        margin: 25px 35px 25px 35px;
        padding: 35px 20px 35px 20px;
        border-radius: 6px;
        box-shadow: #a2a29ead 5px 5px 4px;;
    }

    .title{
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
        font-family: inherit;
    }

    .rememberMe{
        display: inline-block;
        text-align: left;
        width: 100%;
        margin-bottom:10px;
    }






</style>
